<template>
  <div style="display: flex;flex-direction: row;flex-wrap: wrap;position: relative;min-height: 20px;"
  :style="{
      'background': nodeModel.configDict.componentStyle.background,
      'width': nodeModel.configDict.componentStyle.width/2+'px',
      'flex-direction': nodeModel.configDict.componentStyle.flex_direction,
      'flex-wrap': nodeModel.configDict.componentStyle.flex_wrap,
      'overflow-x': 'scroll',
      'justify-content': nodeModel.configDict.componentStyle.justify_content,
      'align-items': nodeModel.configDict.componentStyle.align_items,
      'marginTop': nodeModel.configDict.componentStyle.marginTop/2+'px',
      'marginBottom': nodeModel.configDict.componentStyle.marginBottom/2+'px',
      'marginLeft': nodeModel.configDict.componentStyle.marginLeft/2+'px',
      'marginRight': nodeModel.configDict.componentStyle.marginRight/2+'px',
      'paddingTop': nodeModel.configDict.componentStyle.paddingTop/2+'px',
      'paddingBottom': nodeModel.configDict.componentStyle.paddingBottom/2+'px',
      'paddingLeft': nodeModel.configDict.componentStyle.paddingLeft/2+'px',
      'paddingRight': nodeModel.configDict.componentStyle.paddingRight/2+'px',
    }">
    <div v-html="nodeModel.configDict.componentStyle.richtext"
    :style="{
      'width': nodeModel.configDict.itemStyle.width/2+'px',
    }"></div>
  </div>
</template>
<script>
import Editor from '@/components/Editor';
export default {
  components: {
    Editor
  },
  props:{
    nodeModel:{
          type: Object,
          default: res=>{}
      },
  },
  data() {
    return {
      
    }
  },
  methods:{
      
  }
}
</script>

<style lang="scss" scoped>

</style>